<template>
  <div class="home-container">
    <van-tabs v-model="active">
      <!-- title是tab标题  标签中的内容是tab展示的内容 -->
      <van-tab v-for="item in $store.state.channels.channels" :key="item.id" :title="item.name">
        <!-- 文章列表子组件 -->
        <article-list
          ref="articleList"
          :channel="item"
          @showPopUp="showPopUp"
        />
      </van-tab>
    </van-tabs>
    <van-button ref="btn" />
    <!-- 遮罩层 -->
    <van-popup v-model="show" style="width: 60%">
      <!-- 弹出层结构子组件 -->
      <more-action v-if="show" ref="moreaction" @disLike="disLike" />
    </van-popup>
    <!-- 汉堡按钮 -->
    <div class="bar-btn" @click="showChannel = true">
      <van-icon name="wap-nav" />
    </div>
    <!-- 频道管理弹出层 -->
    <van-action-sheet v-model="showChannel" title="频道管理">
      <!-- 频道管理子组件 -->
      <channel-edit v-if="showChannel" :active="active" @toggleActive="toggleActive" @changeActive="changeActive" />
    </van-action-sheet>

  </div>
</template>

<script>
// import { reqGetUserChannels } from '@/api/channels'
import { reqDisLikeArticle, reqReportArticle } from '@/api/article'
import ArticleList from './components/ArticleList'
import MoreAction from './components/MoreAction'
import ChannelEdit from './components/ChannelEdit'
export default {
  name: 'Home',
  // 挂载组件
  components: { ArticleList, MoreAction, ChannelEdit },
  data() {
    return {
      active: 0, // tabs标签页关联的激活的tab的索引
      // channels: [], // 用户频道数据
      show: false, // 举报反馈的布尔值
      disLikeId: null, // 不喜欢的文章id
      channelId: null, // 不感兴趣文章所在的频道id
      showChannel: false // 控制频道管理的布尔值
    }
  },
  created() {
    this.$store.dispatch('channels/getMyChannels')
    this.$store.dispatch('channels/getAllChannels')
    // this.getUserChannels()
    // 订阅事件
    this.$bus.$on('reportArticle', async(type) => {
      // 发送请求
      await reqReportArticle(this.disLikeId, type)
      // 移除文章
      const i = this.$refs.articleList.findIndex(item => item.channel.id === this.channelId)
      this.$refs.articleList[i].filterList(this.disLikeId) //
      // 关闭弹层
      this.show = false
      // this.$refs.moreaction.isReport = false
    })
  },
  methods: {
    // 获取用户频道列表数据
    // async getUserChannels() {
    //   const { data: { data: { channels }}} = await reqGetUserChannels()
    //   // console.log(channels)
    //   this.channels = channels
    // },
    // 展示弹层
    async showPopUp(id, channelId) { // id不喜欢的文章id,子组件传递过来的
      this.show = true
      console.log(id)
      // 存储一下不喜欢的文章id
      this.disLikeId = id
      this.channelId = channelId // 不感兴趣文章所在的频道id
      // 显示弹层将more-action子组件内的isRoprt设置为false
      // vue的dom更新是异步的 使用this.$nextTick()
      // console.log(this.$refs.moreaction)

      /*  this.$nextTick(() => {
        this.$refs.moreaction.isReport = false
      }) */
      /*  await this.$nextTick()
      this.$refs.moreaction.isReport = false */
    },
    // 不感兴趣
    async disLike() {
      console.log('点击了不感兴趣')
      await reqDisLikeArticle(this.disLikeId)
      // console.log(res)
      // 父组件直接调用文章列表组件删除数据的方法
      console.log(this.$refs.articleList) // 正常应该是一个组件的,但是文章列表是循环渲染的 得到的是一个数组
      const i = this.$refs.articleList.findIndex(item => item.channel.id === this.channelId)
      this.$refs.articleList[i].filterList(this.disLikeId) //
      // 关闭弹层
      this.show = false
    },
    // 切换激活的tab标题
    toggleActive(index) {
      this.active = index
      // 关闭弹出层
      this.showChannel = false
    },
    // 解决删除的频道激活bug
    changeActive(num) {
      this.active = num
    }
  }
}
</script>

<style lang="scss" scoped>
// 如果复制组件的结构类名是在标签中有展示的, 我们可以直接覆盖样式
// 如果复制的组件结构中没有类名展示,而是在调试工具中查找的类名覆盖样式是覆盖不掉的,
//  解决方案1:  将scoped去了 scoped表示只作用于当前组件, 没有了scoped表示作用到全局
//  解决方案2: 深度选择器 ::v-deep(sass/scss)  /deep/(less)  >>>(css)
.home-container {
  height: calc(100vh - 46px - 50px);
  padding-top: 44px;
  // cs3盒子模型
  box-sizing: border-box;
  ::v-deep {
    .van-tabs__line{
      background-color: #3196fa;
    }
    // 设置tabs标题固定定位
    .van-tabs__wrap {
      position: fixed;
      top: 46px;
      width: calc(100% - 20px); // 定位的元素不设置宽度默认是内容撑开的
    }
    .van-tabs{
      height: 100%;
      .van-tabs__content{
        height: 100%;
        // overflow: auto;
        // 为每一个tab面板设置自己的滚动条
        .van-tab__pane {
          height: 100%;
          // overflow: auto;
        }
      }
    }
  }
  // 频道管理的开关按钮
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1;
    .van-icon-wap-nav{
      font-size: 20px;
    }
  }
}
</style>
